<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  <style>
    
    li{
      height: 50px;
      margin: 10px;
      border: 1px solid #000;
    }
    
  </style>
  
</head>
<body>

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

</body>
</html>

<script src="jq/jquery-1.12.2.js"></script>
<script>
  /**
   * 奇数和偶数的行的颜色不一样，鼠标移入高亮显示
   * odd
   * even
   */
  $(function () {
  //找到所有的li，根据奇偶性设置背景色
    $("li:odd").css("background-color","pink");
    $("li:even").css("background-color","yellow");
    
    //注册鼠标移入事件
    $("li").mouseover(function () {
      //当前元素高亮显示
      $(this).css("background-color","red");
    });
    //注册鼠标移出事件
    $("li").mouseout(function () {
      $("li:odd").css("background-color","pink");
      $("li:even").css("background-color","yellow");
    });
  });
  
</script>